import { PageContainer } from '@ant-design/pro-layout';
import {
  Button,
  Card,
  Carousel,
  Col,
  Input,
  InputNumber,
  message,
  Modal,
  Row,
  Select,
  Slider,
  Switch,
  Table
} from 'antd';
import { useForm } from 'antd/es/form/Form';
import { getWindowList , getById, updateWindow } from '@/services/window';
import 'moment/locale/zh-cn'
import firstDiv1 from '../../assets/images/door/firstDiv1.png';
import defaultTabBack from '../../assets/images/module_bk.png'
import lingxing from '../../assets/images/door/lingxing.png';
import TabList from '../../components/tabList';
import zbxx from '../../assets/images/zbInfoBg.png';
import VideoSelector from '@/components/videoSelector';
import { getCategoryList } from '@/services/category';
import {backupModuleList, getActiveModuleList, updateModuleList} from '@/services/homePage';
import React, {useEffect, useRef, useState} from 'react';
import jwfc from '../../assets/images/jyfcTitle.png';
import headerTitle from '../../assets/images/header_title.png';
import spdb from '../../assets/images/spdb.png';
import zbImg from '../../assets/images/zb-items1.png'
import zddh from '../../assets/images/zddh.png'
import tsfw from '../../assets/images/tsffw.png'
import './index.less';
import {Resizable} from "re-resizable";
import { getMenuList } from '@/services/menuSetting';

import ImgUpload from "@/components/ImgUploadByParam";
import {UploadFile} from "antd/lib/upload";
import {getLatestWatchRecord, getSpecialServicePhotos, releaseBanner} from "@/services/banner";
import Search from "antd/lib/input/Search";
import {RightOutlined} from "@ant-design/icons";
import ColorPicker from "@ant-design/pro-form/lib/components/ColorPicker";
const Index: React.FC = (props) => {
  const [form] = useForm();
  const [module1, setModule1] = useState([]);
  const [module2, setModule2] = useState([]);
  const [module3, setModule3] = useState([]);
  const [module4, setModule4] = useState([]);
  const [module5, setModule5] = useState([]);
  const [module6, setModule6] = useState([]);
  const [module7, setModule7] = useState([]);
  const [module8, setModule8] = useState([]);
  const [isShowBorder, setShowBorder] = useState<boolean>(false);
  const [isShowBkd, setBkd] = useState<boolean>(false);
  const [bbkList, setBbkList] = useState<UploadFile[]>([]);

  const [module11, setModule11] = useState([]);
  const [module12, setModule12] = useState([]);
  const [module13, setModule13] = useState([]);
  const [module14, setModule14] = useState([]);
  const [module15, setModule15] = useState([]);
  const [module16, setModule16] = useState([]);
  const [module17, setModule17] = useState([]);
  const [module18, setModule18] = useState([]);
  const [videoSrc, setVideoSrc] = useState('');
  const [bayWindow, setBayWindow] = useState({});
  const [bgColor, setBgColor] = useState<string>('');
  const [modHeadFont, setModHeadFont] = useState<string>('');
  const [selectVideoCoverImage, setSelectVideoCoverImage] = useState('');
  /*飘窗*/
  const [size, setSize] = useState({ width: 100, height: 100 });
  const divRef = useRef(null);
  const [imgSrc, setImgSrc] = useState<string>('');

  const getWindowListMsg = async ()=>{
    const params = {type:'bay',stat:'active'}
    const msg = await getWindowList(params)
    const currentWindow = msg.data.list[0]
    if(!currentWindow || Object.keys(currentWindow).length == 0 || typeof currentWindow == 'undefined')return
    const res = await getById(currentWindow)
    setBayWindow(res.data)
    setImgSrc(res.data.file.httpurl)
    setSize({ width: res.data.width, height: res.data.height });
  }

  /*对联*/
  const [couplet, setCouplet] = useState([]);
  const getCoupletListMsg = async ()=>{
    const params = {type:'couplet',stat:'active'}
    const msg = await getWindowList(params)
    const currentCouplet = msg.data.list
    if(currentCouplet.length == 0)return
    let coupletList = []
    currentCouplet.map(async i=>{
      const res = await getById(i)
      i.imgUrl = res.data.file.httpurl
      coupletList.push(i)
    })
    setCouplet(coupletList)
  }
  const [column,setColumn] = useState([])

  const [zbMsg,setZbMsg] = useState()
  /*获取值班信息*/
  const getZbMsg = async () => {
    const res = await getLatestWatchRecord();
    if (res.code == "0") {
      setZbMsg(res.data);
    }
  };

  /*获取横幅及背景图*/
  const [topBg,setTopBg] = useState()
  const [leftModule,setLeftModule] = useState([
    {
      "catId": "a44f769b-5c88-42d5-81a6-b4008134f84d",
      "name": "工作要闻",
      "topicList": [
        {
          "id": "621b91e9ceda42928183adcb1938c1cc",
          "title": "1110测试字体",
          "publishTime": "2023-11-10 12:13:03",
          "classify": "a44f769b-5c88-42d5-81a6-b4008134f84d",
          "covList": []
        },
        {
          "id": "7c7cd281a7bf42689b125a0b66a02a77",
          "title": "1109黑名单测试",
          "publishTime": "2023-11-09 11:55:29",
          "classify": "a44f769b-5c88-42d5-81a6-b4008134f84d",
          "covList": []
        },
        {
          "id": "cafee940e9c84ba4b9907cb0d52e0ebe",
          "title": "1109测试白名单",
          "publishTime": "2023-11-09 10:04:53",
          "classify": "a44f769b-5c88-42d5-81a6-b4008134f84d",
          "covList": []
        },
        {
          "id": "f11f67932cf34b9b8e9f3a99d5a12409",
          "title": "1109test1",
          "publishTime": "2023-11-09 07:40:23",
          "classify": "a44f769b-5c88-42d5-81a6-b4008134f84d",
          "covList": []
        },
        {
          "id": "a9c2403651514ac9bfebab63ca848477",
          "title": "1107test01",
          "publishTime": "2023-11-09 07:38:41",
          "classify": "a44f769b-5c88-42d5-81a6-b4008134f84d",
          "covList": []
        },
        {
          "id": "248b26fb8fd845da8e11ec0686d8c951",
          "title": "附件测试111",
          "publishTime": "2023-11-08 14:51:51",
          "classify": "a44f769b-5c88-42d5-81a6-b4008134f84d",
          "covList": []
        },
        {
          "id": "f2418794-78bb-11ee-822b-00ff29958c2a",
          "title": "省厅特勤局赴江苏省浦口监狱开展警示教育活动",
          "publishTime": "2023-10-27 09:11:34",
          "classify": "a44f769b-5c88-42d5-81a6-b4008134f84d",
          "covList": []
        },
        {
          "id": "f24186fd-78bb-11ee-822b-00ff29958c2a",
          "title": "省市公安机关圆满完成李长春同志视察江苏安全警卫任务",
          "publishTime": "2023-10-25 11:18:36",
          "classify": "a44f769b-5c88-42d5-81a6-b4008134f84d",
          "covList": []
        },
        {
          "id": "f241855e-78bb-11ee-822b-00ff29958c2a",
          "title": "省厅特勤局召开第三十六次党委理论学习中心组学习会",
          "publishTime": "2023-10-23 17:12:40",
          "classify": "a44f769b-5c88-42d5-81a6-b4008134f84d",
          "covList": []
        },
        {
          "id": "f2418649-78bb-11ee-822b-00ff29958c2a",
          "title": "省厅特勤局召开年度第31次局周例会",
          "publishTime": "2023-10-23 14:39:22",
          "classify": "a44f769b-5c88-42d5-81a6-b4008134f84d",
          "covList": []
        }
      ]
    },
    {
      "catId": "c50eddde-c5ef-4891-9025-c97a02e408bf",
      "name": "通知通告",
      "topicList": [
        {
          "id": "f22e96b9-78bb-11ee-822b-00ff29958c2a",
          "title": "公安网站信息工作考评办法",
          "publishTime": null,
          "classify": "c50eddde-c5ef-4891-9025-c97a02e408bf",
          "covList": []
        },
        {
          "id": "f2410d62-78bb-11ee-822b-00ff29958c2a",
          "title": "关于对7、8月份法定工作日之外加班情况进行公示的公告",
          "publishTime": "2023-10-16 15:11:00",
          "classify": "c50eddde-c5ef-4891-9025-c97a02e408bf",
          "covList": []
        },
        {
          "id": "f2417bc2-78bb-11ee-822b-00ff29958c2a",
          "title": "局机关日常值班备勤表(2023年10月9日—2023年11月5日)",
          "publishTime": "2023-10-08 16:58:09",
          "classify": "c50eddde-c5ef-4891-9025-c97a02e408bf",
          "covList": []
        },
        {
          "id": "f2417526-78bb-11ee-822b-00ff29958c2a",
          "title": "局机关2023年中秋、国庆节值班备勤表",
          "publishTime": "2023-09-28 10:27:02",
          "classify": "c50eddde-c5ef-4891-9025-c97a02e408bf",
          "covList": []
        },
        {
          "id": "f241691a-78bb-11ee-822b-00ff29958c2a",
          "title": "局机关日常值班备勤表(2023年9月11日—2023年10月8日)",
          "publishTime": "2023-09-12 09:24:53",
          "classify": "c50eddde-c5ef-4891-9025-c97a02e408bf",
          "covList": []
        },
        {
          "id": "f2414109-78bb-11ee-822b-00ff29958c2a",
          "title": "局机关日常值班备勤表(2023年8月14日—2023年9月10日)",
          "publishTime": "2023-08-11 20:10:15",
          "classify": "c50eddde-c5ef-4891-9025-c97a02e408bf",
          "covList": []
        },
        {
          "id": "f2412ec6-78bb-11ee-822b-00ff29958c2a",
          "title": "关于对重要外宾警卫勤务全局民警备勤执勤情况进行公示的公告",
          "publishTime": "2023-08-04 15:33:38",
          "classify": "c50eddde-c5ef-4891-9025-c97a02e408bf",
          "covList": []
        },
        {
          "id": "f2411bbe-78bb-11ee-822b-00ff29958c2a",
          "title": "关于对重大警卫勤务全局民警备勤执勤情况进行公示的公告",
          "publishTime": "2023-07-27 16:19:14",
          "classify": "c50eddde-c5ef-4891-9025-c97a02e408bf",
          "covList": []
        },
        {
          "id": "f240fa1f-78bb-11ee-822b-00ff29958c2a",
          "title": "局机关日常值班备勤表(2023年7月17日—2023年8月13日)",
          "publishTime": "2023-07-13 10:53:28",
          "classify": "c50eddde-c5ef-4891-9025-c97a02e408bf",
          "covList": []
        },
        {
          "id": "f2408fc4-78bb-11ee-822b-00ff29958c2a",
          "title": "局机关日常值班备勤表(2023年6月19日—2023年7月16日)",
          "publishTime": "2023-06-13 10:19:50",
          "classify": "c50eddde-c5ef-4891-9025-c97a02e408bf",
          "covList": []
        }
      ]
    }
  ])
  const [bannerSrc1,setBannerSrc1] = useState()
  const [bannerSrc2,setBannerSrc2] = useState()
  const [bannerSrc3,setBannerSrc3] = useState()
  const [topBgBase,setTopBgBase] = useState()
  const [bannerSrc1Base,setBannerSrc1Base] = useState()
  const [bannerSrc2Base,setBannerSrc2Base] = useState()
  const [bannerSrc3Base,setBannerSrc3Base] = useState()
  const [bigBackground,setBBg] = useState()
  const [bigBackgroundBase,setBBgBase] = useState()
  const [bkdMarginTop,setTop] = useState()

  const [fileList4, setFileList4] = useState<UploadFile[]>([]);
  const [fileListForm4,setFilListForm4 ] = useState({})
  /*tabList背景*/
  const [tabBack,setTabBack] = useState(defaultTabBack);
  const [tabBackBase,setTabBackBase] = useState(defaultTabBack);
  const [moduleList,setModule] = useState({
    module1:[],
    module2:[],
    module3:[],
    module4:[],
    module5:[],
    module6:[],
    module7:[],
    module8:[],
  })
  useEffect(() => {
    fileList4[0]&&setTabBack(fileList4[0]?.response?.data[0].src)
    setFilListForm4(fileList4[0]?.response?.data[0])

  }, [fileList4]);

  const getModulesMsg = async () => {
    const res = await getActiveModuleList();
    if (res.code == '0') {
      const bgColor = (res.data.content.backColor && typeof res.data.content.backColor != 'undefined') ? res.data.content.backColor : '#c0cdef'
      const h = document.querySelector('.bgColor');
      if(h?.style && typeof h.style != 'undefined') {
        h.style.background = `linear-gradient(${bgColor},transparent)`
      }
      setBgColor(bgColor)
      setModHeadFont(res.data.content.modHeadFont || 'Microsoft Yahei')
      setTopBg(res.data.content.headerBannerSrc);
      setBannerSrc1(res.data.content.bannerIdSrc1);
      setBannerSrc2(res.data.content.bannerIdSrc2);
      setBannerSrc3(res.data.content.bannerIdSrc3);
      setBBg(res.data.content.bigBackground);
      setBBgBase(res.data.content.bigBackground);
      setTabBack(res.data.content.modHeadBackground);
      setTop(res.data.content.bkdMarginTop||0);

      setTopBgBase(res.data.content.headerBannerSrc);
      setBannerSrc1Base(res.data.content.bannerIdSrc1);
      setBannerSrc2Base(res.data.content.bannerIdSrc2);
      setBannerSrc3Base(res.data.content.bannerIdSrc3);
      setTabBackBase(res.data.content.modHeadBackground );


      setModule11(res.data.moduleList[0]&&res.data.moduleList[0].tabList);
      setModule12(res.data.moduleList[1]&&res.data.moduleList[1].tabList);
      setModule13(res.data.moduleList[2]&&res.data.moduleList[2].tabList);
      setModule14(res.data.moduleList[3]&&res.data.moduleList[3].tabList);
      setModule15(res.data.moduleList[4]&&res.data.moduleList[4].tabList);
      setModule16(res.data.moduleList[5]&&res.data.moduleList[5].tabList);
      setModule17(res.data.moduleList[6]&&res.data.moduleList[6].tabList);
      setModule18(res.data.moduleList[7]&&res.data.moduleList[7].tabList);

      /*      setModule({...moduleList,module1:res.data.moduleList[0]&&res.data.moduleList[0].tabList})
            console.log(moduleList,res.data.moduleList[0]&&res.data.moduleList[0].tabList);*/

      // setModule({...moduleList,module2:res.data.moduleList[1]&&res.data.moduleList[1].tabList})
      // setModule({...moduleList,module3:res.data.moduleList[2]&&res.data.moduleList[2].tabList})
      // setModule({...moduleList,module4:res.data.moduleList[3]&&res.data.moduleList[3].tabList})
      // setModule({...moduleList,module5:res.data.moduleList[4]&&res.data.moduleList[4].tabList})
      // setModule({...moduleList,module6:res.data.moduleList[5]&&res.data.moduleList[5].tabList})
      // setModule({...moduleList,module7:res.data.moduleList[6]&&res.data.moduleList[6].tabList})
      // setModule({...moduleList,module8:res.data.moduleList[7]&&res.data.moduleList[7].tabList})
      const content = res.data.content;
      setCheckFg(content.isTsDay == 1 ? true : false);
      setShowBorder(content.isShowBorder == 1 ? true : false);
      setBkd(content.isShowBkd == 1 ? true : false);
      setJwfcStart(content.jwfcStart);
      setJwfcEnd(content.jwfcEnd);
      setVideoSrc(content.videoId);
      setSelectVideoCoverImage(content.videoCoverImage);
    }
  };

  useEffect(()=>{
    console.log('1 Change');

    if(module1!=moduleList.module1){
      moduleList.module1 = module1
    }
  },[module1])
  useEffect(()=>{
    console.log('2 Change');

    if(module2!=moduleList.module2){
      moduleList.module2 = module2
      // setModule({...moduleList,module2:module2})
      console.log(module2,moduleList,'module2')
    }
  },[module2])
  useEffect(()=>{
    if(module3!=moduleList.module3){
      moduleList.module3 = module3

    }
  },[module3])
  useEffect(()=>{
    if(module4!=moduleList.module4){
      moduleList.module4 = module4

    }
  },[module4])
  useEffect(()=>{
    if(module5!=moduleList.module5){
      moduleList.module5 = module5

    }
  },[module5])
  useEffect(()=>{
    if(module6!=moduleList.module6){
      moduleList.module6 = module6

    }
  },[module6])
  useEffect(()=>{
    if(module1!=moduleList.module7){
      moduleList.module7 = module7

    }
  },[module7])
  useEffect(()=>{
    if(module8!=moduleList.module8){
      moduleList.module8 = module8

      console.log(module8,moduleList,'module8')
    }
  },[module8])
  useEffect(()=>{
    console.log(moduleList,'moduleList');
    if(module1!=moduleList.module1){
      setModule11(moduleList.module1)
    }
    if(module2!=moduleList.module2){
      setModule12(moduleList.module2)
    }
    if(module3!=moduleList.module3){
      setModule13(moduleList.module3)
    }
    if(module4!=moduleList.module4){
      setModule14(moduleList.module4)
    }
    if(module5!=moduleList.module5){
      setModule15(moduleList.module5)
    }
    if(module6!=moduleList.module6){
      setModule16(moduleList.module6)
    }
    if(module7!=moduleList.module7){
      setModule17(moduleList.module7)
    }
    if(module8!=moduleList.module8){
      setModule18(moduleList.module8)
    }
  },[moduleList])
  const [treeData, setTreeData] = useState([]);
  //更改树结构
  const changeTreeData = (data) => {
    for (let i = 0; i < data.length; i++) {
      const element = data[i];
      element.key = element.id;
      element.title = element.name;
      if (element.children && element.children.length > 0) {
        changeTreeData(element.children);
      }
    }
    return data;
  };
  //查询分类
  const getCategory = () => {
    const params = {
      type: 'topic',
    };
    //获取组list
    getCategoryList(params).then(async (res) => {
      const data = changeTreeData(res.data);

      setTreeData(data);
    });
  };
  const [tsfwList,setTsfwList] = useState([]);
  /*获取特色服务*/
  const getTsfw = async () => {
    const res = await getSpecialServicePhotos();
    if (res.code == "0") {
      setTsfwList(res.data);
    }
  };

  const transferTabData = (id,sourceId)=>{
    const list = [
      {
        id: '0ce4a799-4c15-4fd1-a8af-eff933490669',
        name: 'module1',
        tabList: module1,
      },
      {
        id: '7fd14573-262e-4962-a355-6d345265ccac',
        name: 'module2',
        tabList: module2,
      },
      {
        id: '0265688c-aa83-4918-81f2-4205e53213db',
        name: 'module3',
        tabList: module3,
      },
      {
        id: 'd6657db5-7bb1-4525-b880-562d5b199b91',
        name: 'module4',
        tabList: module4,
      },
      {
        id: '7876e17e-49ff-45e9-aab7-5d56f97fe3fe',
        name: 'module5',
        tabList: module5,
      },
      {
        id: '02525791-e9e1-4cde-9ab2-3e209e641a48',
        name: 'module6',
        tabList: module6,
      },
      {
        id: '31a26fec-00cb-4fb5-a394-c14e4e6aa365',
        name: 'module7',
        tabList: module7,
      },
      {
        id: '8991b88a-baef-439c-a81d-75d28c84c7e6',
        name: 'module8',
        tabList: module8,
      },
    ];
    let index = null
    let sourceIndex = null
    let temp = []
    for (let i = 0; i < list.length; i++) {
      const item = list[i]
      if(item.id == id){
        index = i+1
      }
      if(item.id == sourceId){
        sourceIndex = i+1
      }
    }
    const t = list[index-1].id
    console.log(index, sourceIndex);
    list[index-1].id = list[sourceIndex-1].id
    list[sourceIndex-1].id = t
    temp = moduleList['module'+index]
    setModule(pd=>({...pd,['module'+index]:moduleList['module' + sourceIndex]}))
    setModule(pd=>({...pd,['module'+sourceIndex]:temp}))
    // moduleList['module'+index]=moduleList['module' + sourceIndex]
    moduleList['module' + sourceIndex] = temp
    console.log(index,sourceIndex,'index')
    console.log(moduleList['module' + sourceIndex],'sourceIndex');
    console.log(temp,'index');
    /*    setModule12(moduleList[sourceIndex].tabList)
        setModule11(temp)*/
    if(index == 0){
    }
  }
  const onDragOver = ()=>{
    event.preventDefault()
  }
  const onDragStart = (e)=>{
    console.log(e);

    const classes = e.target.children[0].className.split(' ')
    let id = ''
    classes.map(i=>{
      if(i.indexOf('tabList-')!=-1){
        id = i.split('tabList-')[1]
      }
    })
    e.dataTransfer.setData('text/plain',id)
  }
  const onDrop = (e)=>{
    console.log(e);
    const sourceId = e.dataTransfer.getData('text/plain')
    const classes = e.target.className.split(' ')
    let id = ''
    classes.map(i=>{
      if(i.indexOf('tabList-')!=-1){
        id = i.split('tabList-')[1]
      }
    })
    if(id&&sourceId){
      transferTabData(id,sourceId)

    }
  }
  const getMenu = async()=>{
    const res = await getMenuList()
    const menu = ['网站首页',...res.data.map(i=>i.menuName),'search']
    console.log(res);
    setColumn(menu)
  }
  useEffect(() => {
    getCategory();
    getModulesMsg();
    getWindowListMsg();
    getCoupletListMsg();
    getZbMsg();
    getTsfw();
    getMenu();
  }, []);
  const [dialogShow,setShow] = useState(false)
  const [name,setName] = useState('')
  const onSubmit = async (flg) => {
    if(flg == 'backup' && (!name || typeof name == 'undefined')){
      message.warning('请输入节点名称！');
      return;
    }
    if (
      module1.length == 0 ||
      module2.length == 0 ||
      module3.length == 0 ||
      module4.length == 0 ||
      module5.length == 0 ||
      module6.length == 0 ||
      module7.length == 0 ||
      module8.length == 0
    ) {
      message.warning('每个模块至少选择一个分类！');
      return;
    }
    if (!videoSrc) {
      message.warning('请选择视频！');
      return;
    }
    const moduleList = [
      {
        id: '0ce4a799-4c15-4fd1-a8af-eff933490669',
        name: 'module1',
        tabList: module1,
      },
      {
        id: '7fd14573-262e-4962-a355-6d345265ccac',
        name: 'module2',
        tabList: module2,
      },
      {
        id: '0265688c-aa83-4918-81f2-4205e53213db',
        name: 'module3',
        tabList: module3,
      },
      {
        id: 'd6657db5-7bb1-4525-b880-562d5b199b91',
        name: 'module4',
        tabList: module4,
      },
      {
        id: '7876e17e-49ff-45e9-aab7-5d56f97fe3fe',
        name: 'module5',
        tabList: module5,
      },
      {
        id: '02525791-e9e1-4cde-9ab2-3e209e641a48',
        name: 'module6',
        tabList: module6,
      },
      {
        id: '31a26fec-00cb-4fb5-a394-c14e4e6aa365',
        name: 'module7',
        tabList: module7,
      },
      {
        id: '8991b88a-baef-439c-a81d-75d28c84c7e6',
        name: 'module8',
        tabList: module8,
      },
    ];
    console.log(moduleList,'moduleList');
    if(isShowBkd && !(bbkList[0]?.response.data[0].src||bigBackground)){
      message.warning('请上传特殊横幅！');
      return;
    }
    const params = {
      moduleList: moduleList,
      content: {
        isTsDay: checkFg ? 1 : 0,
        jwfcEnd: jwfcEnd,
        jwfcStart: jwfcStart,
        videoId: videoSrc,
        'backColor':bgColor,
        modHeadBackground:fileList4[0]&&fileList4[0]?.response.data[0].src||tabBackBase,
        modHeadFont,
        description:name,
        isShowBorder:isShowBorder ? 1 :  0,
        isShowBkd:isShowBkd ? 1 :  0,
        bigBackground:bbkList[0]&&bbkList[0]?.response.data[0].src||bigBackground,
        bkdMarginTop:bkdMarginTop
      },
    };
    let res
    if(flg == 'backup'){
      res = await backupModuleList(params);
    }else{
      res = await updateModuleList(params);
    }

    if(imgSrc ){
      const windowParams = {...bayWindow,height : divRef.current.size.height,width : divRef.current.size.width}
      await updateWindow(windowParams);
    }

    if (res.code == '0') {
      message.success('保存成功！');
      setShow(false)
      setName('')
      setTabBackBase(tabBack)
    }
  };

  //自定义firstdiv tabs
  const [selectTab, setSelectTab] = useState(1);
  //自定义firstdiv list
  const [selectedList, setSelectedList] = useState(0);

  const [checkFg, setCheckFg] = useState<boolean>(false);

  //文章数量切换
  const [wzslType, setWzslType] = useState(0);
  const [gsggList, setGsggList] = useState([
    {
      title: '习近平会见俄罗斯联邦委员会主席马特维延科',
      date: '2021-06-28',
    },
    {
      title: '习近平致电祝贺米尔济约耶夫当选乌兹别克斯坦总统',
      date: '2021-06-28',
    },
    {
      title: '习近平向全球共享发展行动论坛首届高级别会议致贺',
      date: '2021-06-28',
    },
    {
      title: '李强同所罗门群岛总理索加瓦雷会谈',
      date: '2021-06-28',
    },
    {
      title: '赵乐际与马特维延科共同主持中俄议会合作委员会第',
      date: '2021-06-28',
    },
    {
      title: '王沪宁出席“扎实推进制造业重点产业链优化升级”',
      date: '2021-06-28',
    },
    {
      title: '蔡奇会见越南共产党代表团',
      date: '2021-06-28',
    },
    {
      title: '市住房城乡建设局关于切实加强迎“七一”期间建筑施工安全生产工作的通知',
      date: '2021-06-28',
    },
  ]);
  const [fileList1, setFileList1] = useState<UploadFile[]>([]);
  const [fileListForm,setFilListForm ] = useState({})
  const [fileListForm1,setFilListForm1 ] = useState({})
  const [fileListForm2,setFilListForm2 ] = useState({})
  const [fileListForm3,setFilListForm3 ] = useState({})
  const [bbkForm,setBBkForm ] = useState({})


  const publishImg = async (catName)=>{
    let params
    switch (catName){
      case '横幅-标题':
        params = fileListForm
        break;
      case '横幅-上':
        params = fileListForm1
        break;
      case '横幅-中':
        params = fileListForm2
        break;
      case '横幅-下':
        params = fileListForm3
        break;
    }
    await releaseBanner(catName, {fileList:[params]})
    switch (catName){
      case '横幅-标题':
        setTopBgBase(topBg)
        break;
      case '横幅-上':
        setBannerSrc1Base(bannerSrc1)
        break;
      case '横幅-中':
        setBannerSrc2Base(bannerSrc2)
        break;
      case '横幅-下':
        setBannerSrc3Base(bannerSrc3)
        break;
    }
    message.success('发布成功')
  }

  const carousel = () => {
    return (
      <div className={`banner`}>
        <div className="upload-img">
          <div className="buttons">
            <div style={{"display":bannerSrc1===bannerSrc1Base?'none':''}} className="resetBtn" onClick={()=>{setBannerSrc1(bannerSrc1Base)}}>重置</div>

            <ImgUpload maxCount={1} url={'/api/v1/photo/uploadList'}
                       content={'点击修改图片'} form={form} fileList={fileList1} setFileList={setFileList1} />
            <div style={{"display":bannerSrc1===bannerSrc1Base?'none':''}} className="resetBtn" onClick={()=>{publishImg('横幅-上')}}>发布</div>

          </div>
        </div>

        <Carousel autoplay>
          <img className={'bannerImage'} src={bannerSrc1}></img>
        </Carousel>
      </div>

    );
  };
  const getBkk = ()=>{
    return(
      <img src={bigBackground} alt="" className={ !checkFg ?'specialBanner' : 'home_black specialBanner'}/>
    )
  }
  const [videoSeletorOpen, setVideoSelectorOpen] = useState(false);
  const changeVideo = () => {
    setVideoSelectorOpen(true);
  };

  /*左对联*/
  const leftCoupletDiv = ()=>{
    return(
      <div>
        {couplet.filter(i=>[0,2].includes(i.pos)).map(i=>{
          return (
            <img src={i.imgUrl} width={i.width} height={i.height} key={i.imgUrl} style={{ maxWidth: '100%'}}  alt=""/>
          )
        })}
      </div>
    )
  }

  /*右对联*/
  const rightCoupletDiv = ()=>{
    return(
      <div>
        {couplet.filter(i=>[1,2].includes(i.pos)).map(i=>{
          return (
            <img key={i.imgUrl} src={i.imgUrl} width={i.width} height={i.height} style={{ maxWidth: '100%'}}  alt=""/>
          )
        })}
      </div>
    )
  }

  /*飘窗*/
  const bayWindowDiv = ()=>{
    if(!imgSrc)return (<div></div>)
    return (
      <div className={!checkFg ? 'home window' : 'home_black window'} >
        <Resizable
          ref={divRef}
          onResize={(e, { size }) => {
            setSize(size);
          }}
          style={{ background: '#ccc' }}
          size={size}
          defaultSize={size}
          maxWidth={960}
          maxHeight={600}
          minWidth={100}
          minHeight={100}
        >
          {imgSrc == '' ? null : <img src={imgSrc} style={{ width: '100%', height: '100%' }} />}
        </Resizable>
      </div>

    )
  }

  const [fileList, setFileList] = useState<UploadFile[]>([]);

  useEffect(() => {
    fileList[0]&&setTopBg(fileList[0]?.response?.data[0].src)
    setFilListForm(fileList[0]?.response?.data[0])
  }, [fileList]);


  useEffect(() => {
    fileList1[0]&&setBannerSrc1(fileList1[0]?.response?.data[0].src)
    setFilListForm1(fileList1[0]?.response?.data[0])

  }, [fileList1]);

  const [fileList2, setFileList2] = useState<UploadFile[]>([]);

  useEffect(() => {
    // setTopBg()

    fileList2[0]&&setBannerSrc2(fileList2[0]?.response?.data[0].src)
    setFilListForm2(fileList2[0]?.response?.data[0])

  }, [fileList2]);

  const [fileList3, setFileList3] = useState<UploadFile[]>([]);

  useEffect(() => {
    // setTopBg()

    fileList3[0]&&setBannerSrc3(fileList3[0]?.response?.data[0].src)
    setFilListForm3(fileList3[0]?.response?.data[0])

  }, [fileList3]);


  useEffect(() => {
    // setTopBg()

    bbkList[0]&&setBBg(bbkList[0]?.response?.data[0].src)
    setBBkForm(bbkList[0]?.response?.data[0])

  }, [bbkList]);
  const getTopBg =()=>{
    const columnList = column
    return (
      <div className={`  ${!checkFg ? 'home' : 'home_black'}`}>
        <div className={'headerBox'}>
          <div style={{width: isShowBkd ? '70%' : '100%','margin':'0 auto',position:'relative'}} >
            <div className="upload-img">
              <div className="buttons">
                <div style={{"display":topBg===topBgBase?'none':''}} className="resetBtn" onClick={()=>{setTopBg(topBgBase)}}>重置</div>
                <ImgUpload maxCount={1} url={'/api/v1/photo/uploadList'}
                           content={'点击修改图片'} form={form} fileList={fileList} setFileList={setFileList} />
                <div style={{"display":topBg===topBgBase?'none':''}} className="resetBtn" onClick={()=>{publishImg('横幅-标题')}}>发布</div>
              </div>
            </div>
            <img src={topBg} style={{width: '100%',height:'230px'}} alt=""/>
            <img className={'header_title'} src={headerTitle} alt=""/>
          </div>
          <div className={'columnBox'}>
            <div className={'columnList'}>
              {columnList.map(i => {
                if(i!='search'){
                  return (
                    <div className={'column'} key={i}>{i}</div>
                  )
                }else{
                  return(
                    <div key={i} style={{display:'flex',justifyContent:'center',alignItems:'center'}}>
                      <Search
                        placeholder="关键词查询"
                        style={{
                          width: 200,
                          margin: "10px 5px",
                          color: "#000",
                        }}
                      />
                    </div>
                  )
                }
              })}
            </div>
          </div>
        </div>

      </div>
    );

  }
  //第一层div
  const firstDiv = () => {
    return (
      <div className="door" style={{ textAlign: 'center' }}>
        <span className="baseTitle">习近平会见俄罗斯联邦委员会主席马特维延科</span>
        <div className="firstDiv_body">
          <div className="left"></div>
          <div className="right firstModule">
            <div className="upload-img">
              <div className="buttons">
                <div style={{"display":tabBack===tabBackBase?'none':''}} className="resetBtn" onClick={()=>{setTabBack(tabBackBase);setFileList4([])}}>重置</div>
                <ImgUpload maxCount={1} url={'/api/v1/photo/uploadList'}
                           content={'点击修改背景'} form={form} fileList={fileList4} setFileList={setFileList4} />
                {/*<div style={{"display":tabBack===tabBackBase?'none':''}} className="resetBtn" onClick={()=>{publishImg('横幅-中')}}>发布</div>*/}

              </div>
            </div>
            <TabList
              border={isShowBorder}
              background={tabBack}
              treeData={treeData}
              setModule={setModule1}
              module={leftModule}
              height={310}
              add={false}
              name="module1"
            />
          </div>
        </div>
      </div>
    );
  };
  //第二层div
  const secondDiv = () => {
    // @ts-ignore
    return (
      <div>

        <Row className="secondDiv" gutter={[10, 0]}>
          <Col span={6}>
            <div className="secondDiv_left shadow second_l">
              <div className="secondDiv_zbxx">
                {/*<img src={zbxx} alt="" />*/}
              </div>
              <div className={'zbImg'} >
                <img src={zbImg} alt="" />
              </div>
              <img className={'zddhTitle'} src={zddh} alt="" />
              <div className={"zddhBox"}>
                <div className={'zddh'}>全国公安网站</div>
                <div className={'zddh'}>全国特勤网站</div>
                <div className={'zddh'}>市公安网站</div>
                <div className={'zddh'}>市警卫网站</div>
              </div>
            </div>
          </Col>
          {/*(e)=>{
              console.log(e);
              const classes = e.target.children[0].className.split(' ')
              let id = ''
              classes.map(i=>{
                if(i.indexOf('tabList-')!=-1){
                  id = i.split('tabList-')[1]
                }
              })
              console.log(id,'id');
              e.dataTransfer.setData('text/plain',id)
            }*/}
          {/*ondragstart="event.dataTransfer.setData('text/plain', 'This text may be dragged')"*/}
          <Col span={9}>
            <div className="secondDiv_middle" draggable={true} onDragStart={(e)=>{onDragStart(e)}} onDragOver={()=>{onDragOver()}} onDrop={(e)=>{onDrop(e)}}>
              <TabList
                background={tabBack}
                border={isShowBorder}
                treeData={treeData}
                setModule={setModule1}
                module={module11}
                height={350}
                add={true}
                id="0ce4a799-4c15-4fd1-a8af-eff933490669"
                name="module1"
              />
            </div>
          </Col>
          <Col span={9}>
            <div className="secondDiv_right" draggable={true} onDragStart={(e)=>{onDragStart(e)}} onDragOver={()=>{onDragOver()}} onDrop={(e)=>{onDrop(e)}}>
              <TabList
                border={isShowBorder}
                treeData={treeData}
                module={module12}
                setModule={setModule2}
                height={350}
                add={true}
                id="7fd14573-262e-4962-a355-6d345265ccac"
                name="module2"
              />
            </div>
          </Col>
        </Row>
        <Row style={{marginTop:'20px'}} className="secondDiv" gutter={[10, 0]}>
          <Col span={6} >
            <div className="secondDiv_left shadow">
              <div className="secondDiv_tsfw ">
              </div>
              <div className="secondDiv_tsfw_content">
                <Row gutter={[8, 8]}>
                  {tsfwList.map((item, index) => {
                    if (index > 9) return null;
                    return (
                      <Col className="gutter-row" span={8} key={index}>
                        <div
                          className="tefw_button "
                          style={{
                            background: `url(${item.url})`,
                            backgroundSize: "100% 100%",
                          }}
                        >
                          <a
                            href={item.desc}
                            target="_blank"
                            style={{
                              width: "100%",
                              height: "100%",
                            }}
                          ></a>
                        </div>
                      </Col>
                    );
                  })}
                </Row>
              </div>
            </div>
          </Col>
          <Col span={9}>
            <div className="secondDiv_middle"  draggable={true} onDragStart={(e)=>{onDragStart(e)}} onDragOver={()=>{onDragOver()}} onDrop={(e)=>{onDrop(e)}}>
              <TabList
                background={tabBack}
                border={isShowBorder}
                treeData={treeData}
                setModule={setModule3}
                module={module13}
                height={310}
                add={true}
                id="0265688c-aa83-4918-81f2-4205e53213db"
                name="module3"
              />
            </div>
          </Col>
          <Col span={9}>
            <div className="secondDiv_right"  draggable={true} onDragStart={(e)=>{onDragStart(e)}} onDragOver={()=>{onDragOver()}} onDrop={(e)=>{onDrop(e)}}>
              <TabList
                background={tabBack}
                border={isShowBorder}
                treeData={treeData}
                setModule={setModule4}
                module={module14}
                height={310}
                add={true}
                id="d6657db5-7bb1-4525-b880-562d5b199b91"
                name="module4"
              />
            </div>
          </Col>
        </Row>

      </div>
    );
  };

  //第三层div
  const thirdDiv = () => {
    const submitVideo = (selectVideoId, selectVideoCoverImage) => {
      setVideoSrc(selectVideoId);
      setSelectVideoCoverImage(selectVideoCoverImage);
      setVideoSelectorOpen(false);
    };
    const dataSource = [
      {
        key: '1',
        name: '第一支队',
        age: 32,
      },
      {
        key: '2',
        name: '第二支队',
        age: 42,
      },
      {
        key: '3',
        name: '第三支队',
        age: 32,
      },
      {
        key: '4',
        name: '第四支队',
        age: 42,
      },
      {
        key: '5',
        name: '第五支队',
        age: 32,
      },      {
        key: '6',
        name: '第六支队',
        age: 32,
      },      {
        key: '7',
        name: '政治部',
        age: 32,
      },      {
        key: '8',
        name: '勤务保障部',
        age: 32,
      },      {
        key: '9',
        name: '南京市特勤局',
        age: 32,
      },
      {
        key: '10',
        name: '警令部',
        age: 32,
      },
    ];

    const columns = [
      {
        title: '',
        dataIndex: 'name',
        align: 'center',
        key: 'name',
      },
      {
        title: '',
        align: 'center',
        dataIndex: 'age',
        key: 'age',
      },
    ];
    return (
      <Row className="secondDiv" gutter={[10, 15]}>
        <Col span={18}>
          <Row>
            <Col span={12}>
              <div className="secondDiv_middle"  draggable={true} onDragStart={(e)=>{onDragStart(e)}} onDragOver={()=>{onDragOver()}} onDrop={(e)=>{onDrop(e)}}>
                <TabList
                  background={tabBack}
                  border={isShowBorder}
                  treeData={treeData}
                  setModule={setModule5}
                  id="7876e17e-49ff-45e9-aab7-5d56f97fe3fe"
                  name="module5"
                  height={310}
                  add={true}
                  module={module15}
                />
              </div>
            </Col>
            <Col span={12}>
              <div className="secondDiv_right"  draggable={true} onDragStart={(e)=>{onDragStart(e)}} onDragOver={()=>{onDragOver()}} onDrop={(e)=>{onDrop(e)}}>
                <TabList
                  background={tabBack}
                  border={isShowBorder}
                  treeData={treeData}
                  setModule={setModule6}
                  module={module16}
                  height={310}
                  add={true}
                  id="02525791-e9e1-4cde-9ab2-3e209e641a48"
                  name="module6"
                />
              </div>
            </Col>
          </Row>
          <Row>
            <Col span={12}>
              <div className="secondDiv_middle"  draggable={true} onDragStart={(e)=>{onDragStart(e)}} onDragOver={()=>{onDragOver()}} onDrop={(e)=>{onDrop(e)}}>
                <TabList
                  background={tabBack}
                  border={isShowBorder}
                  add={true}
                  treeData={treeData}
                  id="31a26fec-00cb-4fb5-a394-c14e4e6aa365"
                  name="module7"
                  height={310}
                  setModule={setModule7}
                  module={module17}
                />
              </div>
            </Col>
            <Col span={12}>
              <div className="secondDiv_right"  draggable={true} onDragStart={(e)=>{onDragStart(e)}} onDragOver={()=>{onDragOver()}} onDrop={(e)=>{onDrop(e)}}>
                <TabList
                  background={tabBack}
                  border={isShowBorder}
                  treeData={treeData}
                  id="8991b88a-baef-439c-a81d-75d28c84c7e6"
                  name="module8"
                  height={310}
                  add={true}
                  setModule={setModule8}
                  module={module18}
                />
              </div>
            </Col>
          </Row>
        </Col>
        <Col span={6}>
          <div className="secondDiv_left shadow">
            <div className="secondDiv_video">

              <VideoSelector
                // videoSeletorOpen={videoSeletorOpen}
                submitVideo={(videoId, coverImage) => submitVideo(videoId, coverImage)}
                onCancel={() => setVideoSelectorOpen(false)}
              />
            </div>
            <div className="secondDiv_video_content">
              <img src={selectVideoCoverImage} style={{ width: '100%', height: 160 }} />
              <div className={'videoName'}>视频名称</div>
            </div>
          </div>


          <div className="secondDiv_left shadow columnBox">

            <div className="secondDiv_wzsl_title ">
            </div>
            <div className="secondDiv_wzsl">
              <div
                className={wzslType == 0 ? "text-wzsl_active" : "text-wzsl"}
                onClick={() => {
                  setWzslType(0);
                }}
              >
                当月数量
              </div>
              <div
                className={wzslType == 1 ? "text-wzsl_active" : "text-wzsl"}
                onClick={() => {
                  setWzslType(1);
                }}
              >
                总数量
              </div>
            </div>

            <div className="secondDiv_wzsl_content noHead">
              <Table rowClassName={"rowClassName"} style={{height:'610px'}} dataSource={dataSource} columns={columns} size="small" pagination={false} />
            </div>
          </div>

        </Col>

        <Col span={6}>
        </Col>


        <Col span={6}>
        </Col>
      </Row>
    );
  };
  useEffect(()=>{
    const bg = !checkFg ? `linear-gradient(${bgColor},transparent)` : ''
    const h = document.querySelector('.bgColor')
    if(h && typeof h != 'undefined')
      h.style.background = bg
  },[bgColor])
  const [jwfcStart, setJwfcStart] = useState<number>(0);
  const [jwfcEnd, setJwfcEnd] = useState<number>(8);

  useEffect(()=>{
    console.log(modHeadFont);
    setTimeout(()=>{
      if(modHeadFont && typeof modHeadFont != 'undefined'){
        const hs = document.querySelectorAll('.ant-tabs-tab-btn')
        console.log(hs,'hs');
        if(hs){
          for (let i = 0; i < hs.length; i++) {
            const h = hs[i]
            if(h.style && typeof h.style != 'undefined'){
              h.style.fontFamily = modHeadFont
            }
          }

        }
      }

    },300)
  },[modHeadFont])



  return (
    <PageContainer
      header={{
        title: false,
      }}
    >
      <Card
        title="网站设计"
        extra={
          <>
            <div className={'flex flex-center'}>
              <div className={'flex flex-center mr-5 myColorPicker'} >
                <div>标题字体:&nbsp;</div>
                <Select
                  placeholder="请选择字体"
                  value={modHeadFont}
                  autoClearSearchValue={false}
                  onChange={(val)=>{
                    setModHeadFont(val)
                  }}
                  options={[
                    {value:'Microsoft Yahei',label:'微软雅黑'},
                    {value:'宋体',label:'宋体'},
                    {value:'华文宋体',label:'华文宋体'},
                    {value:'楷体',label:'楷体'},
                    {value:'华文楷体',label:'华文楷体'},
                    {value:'仿宋',label:'仿宋'},
                  ]}
                  style={{ width: 120 }}
                />
              </div>
              <div className={'flex flex-center mr-5 myColorPicker'} >
                <div>网站背景色:&nbsp;</div>
                <ColorPicker value={bgColor} onChange={(val)=> {
                  setBgColor(val)
                }}/>
              </div>

              <div className={'flex flex-center mr-5'}>
                页面风格：
                <Switch
                  checked={checkFg}
                  onChange={(value) => setCheckFg(value)}
                  checkedChildren="黑白"
                  unCheckedChildren="常规"
                />
              </div>
              <div className={'flex flex-center mr-5'}>
                栏目边框：
                <Switch
                  checked={isShowBorder}
                  onChange={(value) => setShowBorder(value)}
                  checkedChildren="显示"
                  unCheckedChildren="隐藏"
                />
              </div>
              <div className={'flex flex-center mr-5'}>
                特殊横幅：
                <Switch
                  checked={isShowBkd}
                  onChange={(value) => setBkd(value)}
                  checkedChildren="显示"
                  unCheckedChildren="隐藏"
                />
              </div>
              {
                isShowBkd ?
                  <div className={'flex flex-center mr-5'}>
                    <div className="buttons">
                      <div style={{"display":bigBackground===bigBackgroundBase?'none':''}} className="resetBtn" onClick={()=>{setBBg(bigBackgroundBase)}}>重置</div>
                      <ImgUpload maxCount={1} url={'/api/v1/photo/uploadList'}
                                 content={'上传横幅'} form={form} fileList={bbkList} setFileList={setBbkList} compress={0}/>
                    </div>
                  </div>
                  : null
              }
              {
                isShowBkd ?
                  <div className={'flex flex-center mr-25'}>
                    <Row>
                      <Col span={12}>
                        <Slider
                          min={1}
                          max={200}
                          onChange={(val)=>{setTop(val)}}
                          defaultValue={bkdMarginTop}
                        />
                      </Col>
                      <Col span={4}>
                        <InputNumber
                          min={1}
                          max={5000}
                          style={{ margin: '0 16px' }}
                          value={bkdMarginTop}
                          onChange={(val)=>{setTop(val)}}
                        />
                      </Col>
                    </Row>



                  </div>
                  : null
              }
            </div>

          </>
        }
      >
        <div >
          {isShowBkd?getBkk():null}
          <div style={{position:'relative'}}>
            <div className={'clearfix'} style={{top: isShowBkd? bkdMarginTop + 'px' :'0',position:isShowBkd?'absolute':'relative',width:'100%'}}>
              {getTopBg()}
              <div className={!checkFg ? 'home flex bgColor' : 'home_black flex'} style={{position:'relative'}}>
                <div className="left" >
                  {leftCoupletDiv()}
                </div>
                <div className="container">
                  <div>
                    {/*飘窗*/}
                    {bayWindowDiv()}
                  </div>
                  <div className={!checkFg ? 'home' : 'home_black'}>
                    <Row>
                      {/* 轮播图 */}
                      <Col span={24}>{carousel()}</Col>
                      {/* 第一层 */}
                      <Col span={24}>{firstDiv()}</Col>
                    </Row>
                    <div style={{marginTop:'20px'}}>
                      {/* banner2 */}
                      <Col span={24}>
                        <div className="banner2 banner">
                          <div className="upload-img">
                            <div className="buttons">
                              <div style={{"display":bannerSrc2===bannerSrc2Base?'none':''}} className="resetBtn" onClick={()=>{setBannerSrc2(bannerSrc2Base)}}>重置</div>
                              <ImgUpload maxCount={1} url={'/api/v1/photo/uploadList'}
                                         content={'点击修改图片'} form={form} fileList={fileList2} setFileList={setFileList2} />
                              <div style={{"display":bannerSrc2===bannerSrc2Base?'none':''}} className="resetBtn" onClick={()=>{publishImg('横幅-中')}}>发布</div>

                            </div>
                          </div>
                          <img src={bannerSrc2} />
                        </div>
                      </Col>

                    </div>
                    <div>
                      {/* 第二层 */}
                      <Col span={24}>{secondDiv()}</Col>

                    </div>
                    <div>
                      {/* bannere */}
                      <Col span={24}>
                        <div className="banner3 banner">
                          <div className="upload-img">
                            <div className="buttons">
                              <div style={{"display":bannerSrc3===bannerSrc3Base?'none':''}} className="resetBtn" onClick={()=>{setBannerSrc3(bannerSrc3Base)}}>重置</div>
                              <ImgUpload maxCount={1} url={'/api/v1/photo/uploadList'}
                                         content={'点击修改图片'} form={form} fileList={fileList3} setFileList={setFileList3} />
                              <div style={{"display":bannerSrc3===bannerSrc3Base?'none':''}} className="publishBtn" onClick={()=>{publishImg('横幅-下')}}>发布</div>

                            </div>
                          </div>
                          <img src={bannerSrc3} />
                        </div>
                      </Col>

                    </div>
                    <div>
                      {/* 第三层 */}
                      <Col span={24}>{thirdDiv()}</Col>

                    </div>
                    <div style={{marginTop:'20px'}}>
                      {/* 第四层 */}
                      <Col span={24} >
                        <div className="fourDiv_title">
                        </div>
                        <div className="fourDiv">
                          <div style={{ display: 'flex', justifyContent: 'space-between' }}>


                            {/*<div className="fourDiv_button">
                        选择区间： 开始&nbsp;&nbsp;&nbsp;
                        <InputNumber
                          min={1}
                          value={jwfcStart}
                          max={100000}
                          onChange={(val) => setJwfcStart(val)}
                        />
                        &nbsp;&nbsp;&nbsp; 结束&nbsp;&nbsp;&nbsp;
                        <InputNumber
                          min={1}
                          value={jwfcEnd}
                          max={100000}
                          onChange={(val) => setJwfcEnd(val)}
                        />
                      </div>*/}
                          </div>
                          <div className="fourDiv_content">
                            <Carousel autoplay>
                              <div>
                                <Row gutter={16}>
                                  <Col className="gutter-row" span={6}>
                                    <img src={firstDiv1} />
                                  </Col>
                                  <Col className="gutter-row" span={6}>
                                    <img src={firstDiv1} />
                                  </Col>
                                  <Col className="gutter-row" span={6}>
                                    <img src={firstDiv1} />
                                  </Col>
                                  <Col className="gutter-row" span={6}>
                                    <img src={firstDiv1} />
                                  </Col>
                                </Row>
                              </div>

                              <div>
                                <Row gutter={16}>
                                  <Col className="gutter-row" span={6}>
                                    <img src={firstDiv1} />
                                  </Col>
                                  <Col className="gutter-row" span={6}>
                                    <img src={firstDiv1} />
                                  </Col>
                                  <Col className="gutter-row" span={6}>
                                    <img src={firstDiv1} />
                                  </Col>
                                  <Col className="gutter-row" span={6}>
                                    <img src={firstDiv1} />
                                  </Col>
                                </Row>
                              </div>
                            </Carousel>
                          </div>
                        </div>
                      </Col>
                    </div>
                  </div>

                </div>
                <div className="right">
                  {rightCoupletDiv()}

                </div>
              </div>
              <Modal title="保存" open={dialogShow} onOk={()=>{onSubmit('backup')}} onCancel={()=>{setShow(false);setName('');}}>
                请输入节点名称：
                <Input value={name} onChange={e=>{console.log(e);setName(e.target.value)}}/>

              </Modal>
              <Button type="primary" style={{ marginLeft: '50%' }} onClick={()=>{onSubmit('update')}}>
                保存
              </Button>
              <Button type="" style={{ marginLeft: '1%' }} onClick={()=>{setShow(true);}}>
                备份
              </Button>
            </div>

          </div>
        </div>





      </Card>
    </PageContainer>
  );
};

export default Index;
